<template>
    <div>
        <Title :title="title"></Title>
        <div style="height: 150px;display: flex;">
            <div ref="bottom1" style="height: 200px; width: 50px;margin-left: 30px;"></div>
            <div style="height: 198x;width: 313px;position: relative;">
                <video autoplay muted loop style="height: 125%;width: 100%; position: absolute;left: px;" src="../components/WeChat_20250917170612.mp4"></video>
            </div>
        </div>
    </div>
</template>
<script>
import { Column } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
// import axios from 'axios';
import { mapState } from 'vuex';
export default {
    data() {
        return {
            title: '风向',
            params: {
                page: 1,
                pageSize: 2
            },
            sData: [],
            columnPlot: null,
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    watch: {
        ed: {
            handler(n, o) {
                // 根据设备信息重新查询数据 重新渲染图表
                // console.log(n,'11111111111111'); 
                this.params.engineer_id = n.engineer_id;
                this.params.device_id = n.device_id;
                this.getSData();
                // // 根据最新获取的数据重新渲染图表 
                this.columnPlot.changeData(this.sData);
            },
            // 深度监听 
            deep: true
        }
    },
    methods: {
        loadColumn() {
            this.columnPlot = new Column(this.$refs.bottom1, {
                data: this.sData,
                xField: 'insert_time',
                yField: 'wind_direction',
                animation: {
                    // 配置图表第一次加载时的入场动画
                    appear: {
                        animation: 'scale-in-y', // 动画效果
                        duration: 5000,  // 动画执行时间
                    },
                },
                label: {
                    // 可手动配置 label 数据标签位置
                    position: 'middle', // 'top', 'bottom', 'middle',
                    // 配置样式
                    style: {
                        fill: '#FFFFFF',
                        opacity: 0.6,
                    },
                },
                xAxis: {
                    label: {
                        autoHide: true,
                        autoRotate: false,
                    },
                },
                yAxis: {
                    label: {
                        style: {
                            fontSize: 0
                        }
                    }
                },
            });

            this.columnPlot.render();

        },
        async getSData() {
            let res = await get('/dashboard/pageQueryData', this.params);
            let temp = [];
            // 将后端获取的数据设置给tempData 
            res.data.list.forEach((item, index, arr) => {
                item.insert_time = moment(item.insert_time).format("HH:mm");
                // 由于查询数据密度密集 需要将数据处理 每隔10条数据取一条数据 
                temp.push(arr[index]);
            });
            this.sData = temp;
        }
    },
    async mounted() {
        await this.getSData();
        this.loadColumn();
    }
}
</script>
<style lang="less" scoped></style>